<template>
    <el-select
        v-model="valueRef"
        filterable
        @update:model-value="(value) => emit('update:modelValue', value)">
        <template #prefix>
            <el-avatar
                size="small"
                style="background-color: whitesmoke; padding: 2px">
                <img :src="getStaticUrl(valueRef)" />
            </el-avatar>
        </template>

        <el-option
            v-for="symbol in tableData"
            :key="symbol.id"
            :label="symbol.name"
            :value="symbol.relpath">
            <el-space>
                <el-avatar size="small">
                    <img :src="getStaticUrl(symbol.relpath)" alt="" />
                </el-avatar>
                {{ symbol.name }}
            </el-space>
        </el-option>
    </el-select>
</template>

<script setup lang="ts">
import { useResourceHelper, useSymbol } from '@/hooks'
import { onMounted, ref, onBeforeUpdate } from 'vue'

const { getSymbolList, tableData } = useSymbol()
const { getStaticUrl } = useResourceHelper()

onMounted(async () => {
    await getSymbolList()
    valueRef.value = props.modelValue || ''
})

onBeforeUpdate(() => {
    valueRef.value = props.modelValue || ''
})

const props = defineProps<{
    modelValue: string | undefined
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

const valueRef = ref('')
</script>

<style lang="scss" scoped></style>
